<template>
    <div class="content-wrap">
        <noData v-if="theModel == 0"></noData>
        <div v-for="(item,index) in theModel"
             :key="index"
             v-else>
            <div class="content"
                 @click="openChild(item)"
                 v-if="item.Children.length>0||item.Category == 'department'">
                <span class="name">
                    {{item.Name}}
                </span>
                <x-icon type="ios-arrow-down"
                        size="30"
                        v-if="item.open && item.Children.length>0"></x-icon>
                <x-icon type="ios-arrow-right"
                        size="30"
                        v-if="!item.open && item.Children.length>0"></x-icon>
            </div>
            <ul class="user-list"
                v-else>
                <li @click="selectedPersonFn(item)">
                    {{item.Name}}
                    <icon v-if="item.selected"
                          type="success-no-circle"></icon>
                </li>
            </ul>
            <div v-show="item.open">
                <item :theModel="item.Children"
                      :selectedPersonFn="selectedPersonFn"></item>
            </div>
        </div>
    </div>
</template>
<script>
import { Icon } from 'vux'
export default {
    name: 'item',
    props: ['theModel', 'selectedPersonFn'],
    components: {
        Icon
    },
    methods: {
        openChild (item) {
            if (item.Children.length > 0) this.$set(item, 'open', !item.open)
        }
    }
}
</script>
<style scoped>
.content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
    padding-left: 10px;
}
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 5px 0px;
}
.name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
}
.user-list li {
    line-height: 18px;
    color: #999;
    font-size: 16px;
    padding-left: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}
.user-list ul li:last-child {
    padding-bottom: 0;
}
</style>
